import * as React from "react";
import "./index.scss";
// import Rodal from "rodal";
// import Rolelist from "./Rolelist";
export default props => {
  const key = props["data-key"];
  return (
    <div
      data-key={key} style={{ ...props.style }}
      className="formitem"
    >
      <Approval {...props} />
    </div>
  );
};

const topcontacts = [
  {
    name: "sad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 1,
  },
  {
    name: "sdfhdf had",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 2,
  },
  {
    name: "sweryad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 3,
  },
  {
    name: "srad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 4,
  },
  {
    name: "srad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 5,
  },
];
class Approval extends React.Component {
  static defaultProps = {
    onChange: () => {},
    value: [],
  };

  //  state = {
  //   visable: false,
  //   selectedmodalvisable: false,
  // };
  //  show() {
  //   this.setState({
  //     visable: true,
  //   });
  // }
  //  selectedmodalshow() {
  //   this.setState({
  //     selectedmodalvisable: true,
  //   });
  // }
  //  hide() {
  //   this.setState({
  //     visable: false,
  //     selectedmodalvisable: false,
  //   });
  // }
  render() {
    // const { visable, selectedmodalvisable } = this.state;
    const { onChange, value } = this.props;
    const Addbotton = () => (
      <div className="addbotton">
        <img
          alt=""
          // onClick={() => this.show()}
          src={`${process.env.PUBLIC_URL}/assets/img/from_add.png`}
        />
        <p>添加审批人</p>
      </div>
    );
    const temp = value;
    return (
      <>
        <div>
          <div className="title">
            <span>审批人</span>
            {temp.length > 4 ? (
              <span onClick={() => this.selectedmodalshow()}>全部</span>
            ) : null}
          </div>
          <div className="rolelist">
            {temp.slice(0, 4).map(val => {
              const role = topcontacts.find(i => i.id === val) || {
                name: "srad",
                icon: `${process.env.PUBLIC_URL}/assets/img/defaultman.png`,
                id: 4,
              };
              const index = topcontacts.findIndex(i => i.id === val);
              return (
                <div key={role.id} className="singlerole">
                  <img
                    className="head" alt=""
                    src={role.icon}
                  />
                  <img
                    className="del"
                    alt=""
                    src={`${process.env.PUBLIC_URL}./assets/img/delrole.png`}
                    onClick={() => {
                      value.splice(index, 1);
                      onChange(value);
                    }}
                  />
                  <p>{role.name}</p>
                </div>
              );
            })}
            <Addbotton />
          </div>
        </div>
      </>
    );
  }
}
